Takeaway

• HTML標籤的props是訂好的，但傳給組件的props可以自定義
• 在子組件中，可以像讀取參數一樣讀取來自父組件的props
• 例如function Profile({ A, B }) {}
• Props的默認值不能用0或null
• 展開語法：{...props}，讀取來自父組件的所有props值
• {children} prop：讀取來自父組件的JSX
• 不要更改props，而是更改state
• 在子組件定義props有哪些，在父組件定義props的值
• 所以會變又結構類似的東西寫在父組件裡
• Props當參數時記得加{　}，不然會出現Objects are not valid as a React child
• JSX的{　}裡可以加物件也可以加矩陣
• 在JSX的物件裡不能再寫JS（JS只能作為文本或屬性）
• 寫JSX時，使用等號，不加逗號；但在JSX裡寫物件時，使用冒號，加逗號
• 子組件裡常用到{　}，父組件裡常用到”　”

//子組件
function Profile({ name, img, tag, award, novel }) {
  return (
    ...
  );
}

首先找出頁面中要重複使用但又會變的部分。以範例來說，我列了name姓名、img頭像、tag特色、award星雲賞、novel代表作，也就是要傳給子組件的props。初學者第一次從頭寫容易忘記把props加進(　)裡，加了之後容易忘記在括號裡裝{　}。

這裡可以參考Figma Components輔助了解：Instance swap類似同階層的圖片（img），其他文字（name, tag, award, novel）屬於Text，而Variant則像是CSS樣式。

//父組件
export default function Gallery() {
  return (
    ...
      <Profile
        name="筒井康隆"
        img={{
          src: "5/50/SF-Magazine-1964-September-2",
          alt: "筒井康隆",
          className: "avatar",
          size: 100
        }}
        tag="#諷諭 #實驗性 #筒井World"
        award="1970, 1970, 1971, 1974, 1975, 1976, 1977"
        novel="《穿越時空的少女》《日本以外全部沉沒》"
      />
   ...
  );
}

接著先以一個區塊做父子搭配。這裡最大的陷阱是標點符號，過了就一帆風順。像我的話就把img prop寫成物件形式，用到長得跟JSX很不同的鍵值對。

因為星新一的臉不在原圖中央，我在CSS寫了個object-position: center top，不然className其實不用當prop。

還有一個特殊之處：要計算星雲賞獲獎次數。官方範例是把award寫成陣列後，再透過.join(', ')轉成字串呈現，我則剛好相反，用了.split(",")把字串切成陣列。麻煩的是星新一沒得過星雲賞，即便award放空字串也會顯示1。遂將程式碼改成{award.split(",").filter((award) => award != "").length}，把空字串給濾掉。

面對需要「客製化」的情況，也讓我對CSS、JS和星新一等人更加熟悉。這正是耗時投入的Bonus吧。